<template>
  <div class="basic-info">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-avatar :size="100" :src="data.avatar" />
      </el-col>
      <el-col :span="20">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ data.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ data.gender }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ data.birthDate }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ data.contact }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ data.email }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ data.education }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  data: Resume['basicInfo']
}>()
</script>